<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/Blog">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>${model.blog.title}</title>
        <meta name="description" content="${model.blog.shortBody}" />
        
        <meta property="og:type" content="article"/>
        <meta property="og:site_name" content="Rentpad.com.ph"/>
        <meta property="og:url" content="${model.props.appPath}/blogs/${model.blog.urlTitle}/${model.blog.id}"/>
        <meta property="og:title" content="${model.blog.title}"/>
        <meta property="og:description" content="${model.blog.shortBody}" />
        
        <meta name="twitter:card" content="summary"/>
        <meta name="twitter:site" value="@rentpadph"/>
        <meta name="twitter:url" content="${model.props.appPath}/blogs/${model.blog.urlTitle}/${model.blog.id}"/>
        <meta name="twitter:title" content="${model.blog.title}"/>
        <meta name="twitter:description" content="${model.blog.shortBody}"/>
           
        <meta itemprop="description" content="${model.blog.shortBody}"/>
                
        <style>
            a {color:#404042;text-decoration:none;}      /* unvisited link */
            a:visited {color:#404042;}  /* visited link */
            a:hover {color:#404042;}  /* mouse over link */
            a:active {color:#404042;}  /* selected link */
        </style>
        <style>
            @font-face
            {
                font-family: avant;
                src: url('${model.props.appPath}/fonts/avangmi-webfont.ttf');
            }
            -webkit-overflow-scrolling: touch; 
        </style> 
        
        <script type="text/javascript" src="js/jquery/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="js/token/jquery.tokeninput.js"></script>  
        <script type="text/javascript">
            $(function() {
                $("#table-invites tr:even").css("background-color", "#fafafa");
            });                   
        </script>        
        <script>
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
            ga('create', 'UA-44197833-1', 'rentpad.com.ph');
            ga('send', 'pageview');
        </script>
    </head>

    <body style="text-align: center; background-color: #FAFAFA; color: #404042; font-family: avant, Century Gothic, Calibri, Verdana; padding: 0px; margin: 0px;">                

        <div id="fb-root"></div>
        <script>(function(d, s, id) {
          var js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) return;
          js = d.createElement(s); js.id = id;
          js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));</script>

        <div style="margin-top: 0px; background-color: white;">

            <%@include file="header.jsp" %>

            <div style="width: 100%; text-align: left; font-family: avant,  Century Gothic, Calibri, Verdana; color: #404042; background-color: white; background: url('${model.props.appPath}/img/content-bg-short.jpg'); background-repeat: repeat-x; display: block; position: relative; top: -2px;">

                <div style="width: 1000px; margin-top: 10px; margin: 0 auto;">
                    
                    <br><br>
                    
                    <table cellpadding="5" cellspacing="5">
                        <tr>
                            <td>
                                <h1><span itemprop="name">&nbsp;${model.blog.title}</span></h1>
                            </td>
                        </tr>
                        <tr>
                            <td>                                
                                <div style="position:relative; top:-20px;"> 
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;by <a href="${model.blog.authorGPlus}" rel="author" style="color: #369">${model.blog.authorName}</a>
                                </div>
                                <hr>
                            </td>
                        </tr>
                        <tr>
                            <td itemprop="text" style="font-size: 15px; font-family: avant, 'Helvetica Neue', Helvetica, Arial, sans-serif; color: rgb(102, 102, 102);">                                
                                <c:if test="${model.blog.primaryPhoto != null}">
                                    <img src="${model.props.rootPath}/uploads/img/${model.blog.primaryPhoto.filename}" title="${model.blog.title}" alt="${model.blog.title}" style="max-width: 350px; max-height: 300px; padding-bottom: 10px; padding-right: 20px;" align="left"/>
                                </c:if>
                                ${model.blog.body}
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <br>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <!-- Place this tag where you want the +1 button to render. -->
                                <div class="g-plusone" data-annotation="inline" data-width="300"></div>

                                <!-- Place this tag after the last +1 button tag. -->
                                <script type="text/javascript">
                                  (function() {
                                    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
                                    po.src = 'https://apis.google.com/js/platform.js';
                                    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
                                  })();
                                </script>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="fb-like" data-href="${model.props.appPath}/blogs/${model.blog.urlTitle}/${model.blog.id}" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                        </tr>
                        <tr>
                            <td align="center" style="background-color: #f3f3f3;">
                                <br>
                                <div class="fb-comments" data-href="${model.props.appPath}/blogs/${model.blog.urlTitle}/${model.blog.id}" data-width="800" data-numposts="5" data-colorscheme="light"></div>
                            </td>
                        </tr>
                    </table>
                    
                    
                    

                </div>

                <br><br>                

            </div>

            <div>
                <%@include file="footer.jsp" %>
            </div>

        </div>

    </body>
    
</html>
